<template>
	<view class="verify-box" :class="gglass" @click="onclick">
		<!-- <c-text :color="colors">
			{{ second?second+' S':'获取验证码'}}
		</c-text> -->
		<c-text :color="colors">{{ second ? second + ' S' : $t('mine.setting.accounts.getCode') }}</c-text>
	</view>
</template>

<script>
import { emailVerify } from '../ways/verify.js';
export default {
	name: 'c-verify-email',
	props: {
		gglass: {
			type: String,
			default: ''
		},
		sec: {
			type: [Number, String],
			default: 60
		},
		email: {
			type: [Number, String],
			default: ''
		},
		color: {
			type: String,
			default: ''
		},
		api: {
			type: String,
			default: 'VerificationCodeApi/SendEmail'
		},
		range_key: {
			type: String,
			default: 'emailAddress'
		}
	},
	data() {
		return {
			interval: null,
			second: 0
		};
	},
	computed: {
		colors() {
			return this.$color[this.color] || this.color;
		}
	},
	methods: {
		onclick() {
			if (this.second) return;
			if (!emailVerify(this.email, this.$t('mine.setting.accounts.errorEmail'))) return;
			this.second = this.sec;

			clearInterval(this.interval);
			this.interval = setInterval(() => {
				this.second--;
				if (this.second <= 0) {
					clearInterval(this.interval);
					this.second = 0;
				}
			}, 1000);
			let params = {};
			params[this.range_key] = this.email;
			this.$http.get(this.api, params);
		}
	}
};
</script>

<style lang="scss" scoped>
.verify-box {
	display: inline-block;
	font-size: 28rpx;
	white-space: nowrap;
}
</style>
